<template>
  <div class="bar-box">
    <!-- 导航栏组件 -->
    <div class="avatar">
      <div>
        <img
          style="width: 100px"
          v-if="user.avatar"
          :src="require(`../assets/img/${user.avatar}`)"
        />
      </div>
      <div>
        <span class="item-name-text">{{ user.enName }}</span>
      </div>
    </div>
    <div class="menue">
      <div
        @click="changeType(menue)"
        :class="`menue-item ${menue.colorClass}-color`"
        v-for="menue in menues"
      >
        <a-icon :type="menue.iconName" />
        <span class="item-name">{{ menue.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'navBar',
  data() {
    return {
      menues: [],
      user: {},
    }
  },
  created() {
    this.getMenue()
    this.getUserInfo()
  },
  methods: {
    // 获取目录
    getMenue() {
      this.$axios.get('/getMenue').then((val) => {
        if (val.status === 200) {
          console.log()
          val.data.forEach((item, index) => {
            if (item.route === this.$route.path) {
              item.colorClass = 'deep'
            } else {
              item.colorClass = 'light'
            }
          })
          this.menues = val.data
        }
      })
    },
    // 获取用户信息
    getUserInfo() {
       this.$axios.get('/getUser').then((val) => {
        if (val.status === 200) {
          this.user = val.data
          localStorage.setItem('userId',val.data.id)
        }
      })
    },
    // 切换目录
    changeType(menue) {
      this.$router.push(`${menue.route}`)
      // 绑定出发的样式属性
      this.changeColor(menue)
      // 子组件调用父组件的方式
      // 1. 使用emit 进行广播父组件需要进行触发的方法  （需要在父组件调用子组件的时候进行绑定相应的方法）
      // 2. 使用parent 获取父组件的方式在进行调用父组件中的方法
      // 3. 将父组件的方法直接以参数的形式进行传递给子组件，然后再进行调用
      // this.$emit('fun', menue.componentName)
      /// this.$parent.changeComponent(menue.componentName)
    },
    // 触发样式修改方法
    changeColor(menue) {
      this.menues.forEach((val) => {
        if (val.id === menue.id) {
          val.colorClass = 'deep'
        } else {
          val.colorClass = 'light'
        }
      })
      //  this.menues[menue.id - 1].colorClass = 'deep'
    },
  },
}
</script>

<style scoped lang="less">
.bar-box {
  text-align: center;
  & div {
    line-height: 60px;
  }
  .menue {
    font-size: 16px;
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
  }
  .item-name-text {
    font-size: 18px;
  }
  .avatar {
    width: 150px;
    margin: 0 auto;
    border-bottom: 1px solid rgb(168, 167, 167);
  }
  .item-name {
    margin-left: 10px;
  }
  .menue-item {
    cursor: pointer;
  }
  .menue-item:hover {
    color: rgb(0, 0, 0);
  }
  .deep-color {
    color: rgb(0, 0, 0);
  }
  .light-color {
    color: rgba(0, 0, 0, 0.65);
  }
}
</style>
